{{ define "main" }}
  {{- if not .IsHome }}
  {{ .Content }}
  {{- end }}

  <div id="search" v-cloak>
    <form @submit.stop.prevent="onSubmit">
      <input name="q" class="form-control" v-model="query" placeholder="Search..." />
    </form>
    <ul class="nav gap-1 mt-1">
      <li class="nav-item"><a class="badge text-primary border border-primary" href="{{ .Permalink }}">All</a></li>
      <li class="nav-item"><a class="badge text-primary border border-primary" href="?q=Sampler">Sampler</a></li>
      <li class="nav-item"><a class="badge text-primary border border-primary" href="?q=Visualization">Visualization</a></li>
      <li class="nav-item"><a class="badge text-primary border border-primary" href="?q=Pruner">Pruner</a></li>
      <li class="nav-item"><a class="badge text-primary border border-primary" href="?q=Benchmark">Benchmark</a></li>
    </ul>
    <div class="row">
      <div class="col-12 col-md-6 mt-4 d-flex" v-for="doc in pageDocs">
        <div class="card w-100">
          <div class="card-body d-flex flex-column">
            <h2 class="h5"><a :href="[[ doc.item.permalink ]]">[[ doc.item.title ]]</a></h2>
            <div class="flex-grow-1">
              <img :src="[[ doc.item.image ]]" class="float-start w-25 me-2 mb-2" v-if="doc.item.image" />
              <p>[[ doc.item.description ]]</p>
            </div>
            <ul class="nav gap-1">
              <li class="nav-item" v-for="tag in doc.item.tags">
                <a class="badge text-primary border border-primary" :href="[[ tag.permalink ]]">[[ tag.title ]]</a>
              </li>
            </ul>
          </div>
          <div class="card-footer small text-muted text-end">
            Last update: [[ doc.item.updated_at.format("YYYY-MM-DD") ]]
          </div>
        </div>
      </div>
    </div>
    <ul class="pagination mt-4 justify-content-center" v-if="totalPages>1">
      <li class="page-item" v-bind:class="{disabled: page==1}">
        <a class="page-link" href="#" v-on:click="page-=1">&laquo;</a>
      </li>
      <li class="page-item" v-for="p in totalPages">
        <a class="page-link" v-bind:class="{active: page==p}" href="#" v-on:click="page=p">[[ p ]]</a>
      </li>
      <li class="page-item" v-bind:class="{disabled: page==totalPages}">
        <a class="page-link" href="#" v-on:click="page+=1">&raquo;</a>
      </li>
    </ul>
  </div>

  {{- if eq hugo.Environment "development" }}
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  {{- else }}
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  {{- end }}
  <script src="https://cdn.jsdelivr.net/npm/fuse.js@7.0.0"></script>
  <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
  {{ partialCached "head/search-js.html" . }}
{{ end }}
